<template>
    <div class="login">
        <div class="lTitle">
            <img src="../../static/images/logo3.png" alt="" />

            <h2>register</h2>
        </div>

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="user_nick_name" name="昵称" label="昵称" placeholder="昵称" :rules="[{ required: true, message: '请填写昵称' }]" />

                <van-field v-model="user_acc" name="邮箱" label="邮箱" placeholder="邮箱" :rules="[{ required: true, message: '请填写邮箱' }]" />
                <van-field v-model="user_pwd" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="email" center clearable label="验证码" placeholder="请输入邮箱验证码">
                    <template #button>
                        <van-button size="small" @click="sendCode" type="primary">发送验证码</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit"> 注册 </van-button>
            </div>
        </van-form>
        <router-link class="goLogin" replace to="/login">去登录</router-link>
    </div>
</template>

<script setup>
import { Form, Field, CellGroup, showToast } from "vant";
import moment from "moment";
import { register, send_code } from "@/request";
import { ref } from "vue";
import { useRouter } from "vue-router";
let user_acc = ref("");
let user_pwd = ref("");
let user_nick_name = ref("");
let email = ref("");
let router = useRouter();
const sendCode = () => {
    // console.log(user_acc.value);
    send_code({ email: user_acc.value }).then((data) => {
        console.log(data);
        showToast(data.msg);
    });
};
const onSubmit = () => {
    let create_time = moment(new Date()).format("YYYY-MM-DD");
    // console.log(create_time, user_acc.value);
    // console.log(moment(create_time).format("YYYY-MM-DD"));
    // console.log(email);
    register({ user_acc: user_acc.value, user_pwd: user_pwd.value, user_nick_name: user_nick_name.value, create_time: create_time, email: email.value }).then((data) => {
        alert(data.msg);
        if (data.code == 200) {
            // console.log("router");
            router.push("/login");
        }
    });
    // console.log(register);
};
</script>
<style lang="scss" scope>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";
.login {
    overflow: hidden;
    .lTitle {
        font-size: 1.28rem;
        text-align: center;
        padding-bottom: 1.3333rem;
        margin-top: 3.2rem;
        font-weight: 800;
        color: $activeColor;
        display: flex;
        justify-content: center;
        img {
            width: 1.3333rem;
            margin-right: 8px;
        }
    }
    .goLogin {
        display: block;
        font-size: 0.32rem;
        text-align: center;
    }
    .van-button--primary {
        color: white;
        background-color: $bgColor;
        border: 1px solid $activeColor;
        width: 100%;
        margin: 0 auto;
    }
    .van-form {
        margin: 0 0.2667rem;
    }
}
</style>
